<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>今天天气很{{isHot?'炎热':'凉爽'}}</h2>
      <button v-on:click="changeWeather">切换天气</button>
    </div>
  </body>
</html>
<script>
  'use strict';
  Vue.config.productionTip = false;
  new Vue({
    el: '#app',
    data() {
      return {
        isHot: true,
        /*
           原则上来说，在data中写函数，并且是箭头函数，函数内部的this指向的是当前的vue实例对象
           但是一旦写成了普通的函数，则this指向全局window，严格模式下会指向null
           但是我们不会把函数写在data中，
           1.必须写成箭头函数
           2.函数和数据混在一起不容易维护（data就是为了写数据的）
        */
        // changeWeather() {
        //   console.log(this);
        // },
      };
    },
    /*
      methods选项中用来写方法，比如事件的回调函数，也有我们自己封装的函数
      methods中的方法已经被vue统一给处理了，vue控制methods中所有的方法的this都指向当前的vue实例
      为什么要把methods方法的this指向vm实例，因为方法一般都是用来操作数据的，二数据都是在vm实例上放着的
      methods中的方法也会全部的放在vm实例上，供我们去使用
    */
    methods: {
      changeWeather() {
        this.isHot = !this.isHot;
      },
    },
  });
</script>
